<template>
    <XtxBread>
        <XtxBreadItem to="/">首页</XtxBreadItem>
        <XtxBreadItem v-if="category.top" :to="`/category/${category.top.id}`">{{category.top.name}}</XtxBreadItem>
        <Transition name="fade-right" mode="out-in">
            <XtxBreadItem v-if="category.sub" :key="category.sub.id">{{category.sub.name}}</XtxBreadItem>
        </Transition>
    </XtxBread>
</template>

<script>
import { computed } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
export default {
    name: "SubBread",
    setup() {
        const route = useRoute();
        const store = useStore();
        const category = computed(() => {
            let cate = {};
            store.state.category.list.forEach((item) => {
                if (item.children) {
                    const sub = item.children.find((sub) => sub.id === route.params.id);
                    if (sub) {
                        cate.top = {id:item.id,name:item.name}
                        cate.sub = {id:sub.id,name:sub.name}
                    }
                }
            });
            return cate;
        });
        return { category };
    },
};
</script>

<style>
</style>